<script>
import {submitAdd} from "./js/addHouseJs";
import {uploadImg} from "../../../../util/js/globalRequestJs.js";
import {checkFileSize} from "../../../../util/js/utils";

export default {
  data() {
    return {
      house: {
        huuid: '',
        name: '',
        area: '',
        houseType: '',
        floor: '',
        detailAddress: '',
        picture: '',
        otherIntroduction: ''
      }
    }
  },
  methods:{
    // 关闭弹窗
    closeAdd(){
      this.$emit('closeAdd');
    },
    // 提交数据并关闭弹窗
    addSubmit(){
      const _this = this;
      _this.$confirm('是否确定提交数据？','新增提示',{
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async () => {
        submitAdd(_this.house).then(res=>{
          if (res.code === '200') {
            _this.$message.success("新增成功");
            _this.closeAdd();
          }else{
            _this.$message.error(res.msg);
          }
        }).catch(err => {
          console.log('系统出错了!',err);
        })
      })
    },
    // 上传图片
    uploadPicture(){
      // 触发隐藏的文件选择器点击事件
      this.$refs.fileInput.click();
    },
    // 文件选择器点击事件
    handleFileChange(event) {
      // 从事件中获取选择的文件
      const file = event.target.files[0];

      if(!checkFileSize(file)){
        this.$message.error('File size should be less than 1M, please upload again!');
        return ;
      }

      let formData = new FormData();
      formData.append('file',file);

      this.$confirm('是否确定上传？','提示',{
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }).then(async () => {
        // 发送请求到后端进行处理
        uploadImg(formData).then(res=>{
          if (res.code === '200') {
            console.log(res.data)
            this.house.picture = res.data;
            this.$message.success('上传成功')
          }else{
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
          console.log('系统出错了',err);
        })
      }).catch(() => {
        return ;
      })
    }
  }
}
</script>

<template>
  <div id="hl-add-container" style="height: 700px;height: 500px;padding: 10px;">
    <h1 style="text-align: center;">新增</h1>
    <div id="hl-add-container">
      <el-descriptions class="margin-top" :column="3" border style="text-align: center">
        <el-descriptions-item>
          <template slot="label">
            名称
          </template>
          <el-input v-model="house.name" style="width: 100px"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            户型
          </template>
          <el-input v-model="house.houseType" style="width: 100px"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            楼层
          </template>
          <el-input v-model="house.floor" style="width: 40px"></el-input>
          楼
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            面积
          </template>
          <el-input v-model="house.area" style="width: 80px"></el-input>
          平方米
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            地址
          </template>
          <el-input v-model="house.detailAddress"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            图片
          </template>
          <img :src="house.picture" style="max-width: 150px; max-height: 150px;">
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            简介
          </template>
          <el-input
            type="textarea"
            v-model="house.otherIntroduction"
            maxlength="24"
            show-word-limit>
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div id="hl-add-bottom-upload">
      <el-button @click="uploadPicture" type="warning" plain>上传图片</el-button>
      <!-- 隐藏的文件选择器 -->
      <input ref="fileInput" type="file" style="display: none" @change="handleFileChange">
    </div>
    <div id="hl-add-bottom-submit">
      <el-button @click="closeAdd" type="primary" plain>取消</el-button>
      <el-button @click="addSubmit" type="primary" plain>提交</el-button>
    </div>
  </div>
</template>

<style scoped>

#hl-add-bottom-upload {
  position: relative;
  width: 100px;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
}
#hl-add-bottom-submit {
  position: relative;
  width: 160px;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
}
</style>
